<script setup lang="ts">
import {ref, withDefaults, defineModel, watch} from 'vue'


withDefaults(defineProps<{
  email: string,
  errorInfo: string,
}>(), {})

const code = defineModel({type: String, required: true})
const showKeyboard = ref(false)

watch(code, (newVal) => {
  if (newVal ?? ''.length > 6) {
    code.value = newVal?.slice(0, 6)
  }
});

</script>

<template>
  <div class="code-container-title">
    <h1 class="title">请输入验证码</h1>
    <p class="code-tip">验证码已发送至 {{ email }}</p>
  </div>
  <VanPasswordInput
      :value="code"
      :gutter="10"
      style="margin: 5vh 0 0;"
      :focused="showKeyboard"
      length="6"
      :mask="false"
      :error-info="errorInfo"
      @focus="showKeyboard = true"/>
  <!-- 数字键盘 -->
  <VanNumberKeyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false"/>
</template>

<style scoped>
.title {
  font-weight: bold;
  font-size: 1.6em;
  margin-bottom: 20px;
}

.code-tip {
  font-size: 1em;
  color: #999;
}
</style>
